/**
 * @name: MenuList
 * @Description:桌面的菜单
 * @Author: 方琦
 * @Date: 2022/8/10 16:31
 **/

import React, {useState} from 'react';
import {inject, observer} from "mobx-react";
import Model from "../model/Model";
import Loading from "../model/Loading";
import "./../../../src/assets/fonts/iconfont.css";
import desktopMenu from "./desktopMenu.module.css";
import footer from "./footer.module.css";

// 懒加载
const lazyLoad = (path) => {
    // 这个方法需要注意的一点，这个 path 不能直接传`相对路径`类似 `../pages/App`, 会找不到组件，所以最好只传过来一个组件名字，然后内部拼接相对路径
    const Comp = React.lazy(() => import(`./../${path}`))
    return (
        <React.Suspense fallback={<Loading/>}>
            <Comp/>
        </React.Suspense>
    )
}

function MenuList(props) {
    const {
        menuType, item: {
            width,
            bg, icon,
            path = '',
            title = '',
            id, class_type, isDis = true
        }
    } = props

    const [data, setData] = useState(props.item);
    const [isDisplay, setIsDisplay] = useState(isDis);
    const [topIndex, setTopIndex] = useState(0);
    const [isHover, setIsHover] = useState(false);

    //点击icon弹出组件
    const change = (show = false) => {
        if (props.menuStore.displayMenu.length < 10) {
            if (show) {
                props.menuStore.addDisplayMenu({...data})
            }
            let value = {...data};
            value.isShow = show;
            setIsDisplay(true);
            setData({...value});
            setTopIndex(topIndex + 1)
            //改变面包屑的激活状态
            props.menuStore.isActiveMenuItem(id)
        }
    }

    //配置公共组件需要传递的参数
    const modalConfig = {
        isDisplay,
        topIndex,
        visible: data.isShow,
        //“x"，关闭弹窗
        closeModal: () => {
            change(false);
            props.menuStore.delDisplayMenu(id)
        },
        //"-"，弹窗隐藏
        onIsDisplay: (flag) => {
            setIsDisplay(flag);
            props.menuStore.isDisPlayMenuItem(id, flag);
            props.menuStore.isDisplayStartMenu = flag;
        }
    };

    //设置鼠标移入移出的样式
    const handleMouse = (flag) => {
        setIsHover(flag)
    }

    return (
        <>
            {class_type === menuType && menuType === 1 ?
                <div className={desktopMenu.menuItem} onClick={() => change(true)}>
                    <div className={desktopMenu.iconDiv} style={{backgroundColor: bg}}>
                        <span className={desktopMenu.icon + " iconfont " + icon}></span>
                    </div>
                    <p>{title}</p>
                </div> :
                class_type === menuType && menuType === 2 ?
                    <div className={footer.leftItem} style={{backgroundColor: isHover ? '#51514D' : 'black'}}
                         onClick={() => change(true)} onMouseEnter={() => handleMouse(true)}
                         onMouseLeave={() => handleMouse(false)}>
                        <div className={footer.leftIconDiv} style={{backgroundColor: bg}}>
                            <span className={footer.icon + " iconfont " + icon}></span>
                        </div>
                        <span>{title}</span>
                    </div> : class_type === menuType && menuType === 3 ?
                        <div className={footer.rightItem}
                             style={{width, backgroundColor: bg}}
                             onClick={() => change(true, title)}>
                            < span className={footer.rightIcon + " iconfont " + icon}></span>
                            <span>{title}</span>
                        </div> : ""}
            <Model {...modalConfig} title={title}>{lazyLoad(path)}</Model>
        </>
    )
}

export default inject("menuStore")(observer(MenuList))
